<template>
  <el-dialog
    :title="view === 'create'? '添加电子券信息': '修改电子券信息'"
    :visible="true"
    custom-class="CdialogWrapper"
    :before-close="closeDialog"
    >
    <el-form :model="formData" label-width="140px" ref="ruleForm" :rules="rules">
     <el-form-item label="电子券名称" prop="name" required>
        <el-input v-model.trim="formData.name" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="类型" prop="type" required>
        <el-select v-model.trim="formData.type" placeholder="请选择电子券类型">
          <el-option label="折扣券" value="rebate"></el-option>
          <el-option label="抵用券" value="voucher"></el-option>
        </el-select>
     </el-form-item>
     <el-form-item label="发券途径" prop="promAppro" required>
         <el-select v-model.trim="formData.promAppro" placeholder="请选择发券途径">
              <!-- <el-option 
              	v-for="item in SelectList"
      					:key="item.id"
      					:label="item.promAppro"
      					:value="item.id"
      				></el-option> -->
          <el-option label="普通券" value="general"></el-option>
        </el-select>
     </el-form-item>
     <el-form-item label="抵用券限制金额" prop="restricted">
        <el-input v-model.trim="formData.restricted" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="优惠券面值" prop="denomination" required>
        <el-input v-model.trim="formData.denomination" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="总数量" prop="num" required>
        <el-input v-model.trim="formData.num" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="有效开始时间">
         <div class="block">
				    <el-date-picker
				      v-model="formData.validatyBegin"
              format="yyyy-MM-dd"
				      type="date"
				      :picker-options="pickerBeginDateBefore"
				      placeholder="选择日期时间">
				    </el-date-picker>
				  </div>
      </el-form-item>
      <el-form-item label="有效期结束时间">
         <div class="block">
				    <el-date-picker
				      v-model="formData.validatyEnd"
              format="yyyy-MM-dd"
				      type="date"
				      :picker-options="pickerBeginDateAfter"
				      placeholder="选择日期时间">
				    </el-date-picker>
				  </div>
      </el-form-item>
     <el-form-item label="限制使用日期" prop="disableDate">
        <el-checkbox-group 
          v-model="formData.disableDate"
          :min="1"
          :max="7">
          <el-checkbox v-for="week in weekList" :label="week.value" :key="week.key">{{week.key}}</el-checkbox>
        </el-checkbox-group>
     </el-form-item>
     <el-form-item label="使用时间段" prop="useTime" required>
        <el-time-select
          placeholder="起始时间"
          v-model="startTime"
          :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00'
          }">
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime"
          :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00',
            minTime: startTime
          }">
        </el-time-select>
     </el-form-item>
     <el-form-item label="使用规则" prop="useRule">
         <el-select v-model.trim="formData.useRule" placeholder="请选择使用规则">
           <el-option label="和其他优惠券一起使用" value="D"></el-option>
           <el-option label="叠加使用" value="M"></el-option> 
        </el-select>
     </el-form-item>
     <el-form-item label="可以叠加使用张数" prop="useNum">
        <el-input v-model.trim="formData.useNum" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="人均消费" prop="per">
        <el-input v-model.trim="formData.per" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="电子券状态" prop="type2">
         <el-select v-model.trim="formData.type2" placeholder="请选择电子券状态">
            <el-option label="默认" value="default"></el-option>
            <el-option label="可分享" value="share"></el-option> 
            <el-option label="只可使用" value="useonly"></el-option> 
        </el-select>
     </el-form-item>
     <el-form-item label="现金价格" prop="cash">
        <el-input v-model.trim="formData.cash" auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="第三方券类型">
         <el-select v-model.trim="formData.couponType" placeholder="请选择第三方券类型">
            <el-option label="默认" value="default"></el-option>
            <el-option label="第三方" value="third"></el-option> 
        </el-select>
     </el-form-item>
     <el-form-item label="使用描述" prop="thirdDesc">
        <!-- <el-input v-model.trim="formData.thirdDesc" auto-complete="off"></el-input> -->
        <el-input
          v-model.trim="formData.thirdDesc"
          type="textarea"
          class="textarea"
         auto-complete="off"></el-input>
     </el-form-item>
     <el-form-item label="使用描述类型" prop="thirdType">
         <el-select v-model.trim="formData.thirdType" placeholder="请选择使用描述类型">
            <el-option label="默认" value="default"></el-option>
            <el-option label="链接" value="url"></el-option> 
        </el-select>
     </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { create, edit,select } from "@/services/coupons";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
var vailNumber = (rule, value, callback) => {
	var NumberyRegex = /^[0-9]*$/;
	if (!NumberyRegex.test(value)) {
	    callback(new Error('格式不正确,只能输入数字'))
	    } else {
	        callback();
	    }
};
export default {
  name: "edit-role",
  data () {
    return {
      id:"",
      SelectList:[],
      typeList:[],
      startTime:"",
      endTime:"",
      formData: {
        name: "",
        type: "",
        promAppro: "",
        restricted: "",
        denomination: "",
        num: "",
        validatyBegin: "",
        validatyEnd: "",
        disableDate: [],
        useTime: "",
        useRule:"",
        useNum: "",
        per: "",
        type2: "",
        cash: "",
        couponType: "",
        thirdDesc: "",
        thirdType: ""
      },
      weekList:[
      {
          key: "星期一",
          value: "1"
      }, {
          key: "星期二",
          value: "2"
      }, {
          key: "星期三",
          value: "3"
      }, {
          key: "星期四",
          value: "4"
      }, {
          key: "星期五",
          value: "5"
      }, {
          key: "星期六",
          value: "6"
      }, {
          key: "星期天",
          value: "7"
      }],
      dialogFormVisible: false,
      pickerBeginDateBefore:{
            disabledDate: (time) => {
                let beginDateVal = this.formData.validatyEnd;
                if (beginDateVal) {
                    return time.getTime() > beginDateVal;
                }
            }
			},
			pickerBeginDateAfter:{
					disabledDate: (time) => {
              let beginDateVal = this.formData.validatyBegin;
							if (beginDateVal) {
									return time.getTime() < beginDateVal;
							}
					}
			},
      rules: {
        specName: [{ required: true, message: "请输入规格名称", trigger: "blur" },
        { min: 1, max: 50, message: '长度在 50个字符以内', trigger: 'blur' }]
      }
    }
  },
  props: {
    view: {
      type: String,
      default: "create"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    async loadSelect () {
        try {
          let data = await select()
          this.SelectList = data.specCombo
          if(this.formData.parentId == "0"){
            this.formData.parentId = ""
          }
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
    },
    submit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            if (this.view === "create") {
                  var useTime = this.startTime +'-'+ this.endTime;
                  this.formData.useTime = useTime;
                  var validatyBegin = new Date(this.formData.validatyBegin);  
                  this.formData.validatyBegin = validatyBegin.getFullYear() + '-' + (validatyBegin.getMonth() + 1) + '-' + validatyBegin.getDate(); 
                  var validatyEnd = new Date(this.formData.validatyEnd);  
                  this.formData.validatyEnd = validatyEnd.getFullYear() + '-' + (validatyEnd.getMonth() + 1) + '-' + validatyEnd.getDate(); 
                  await create({
                    name: this.formData.name,
                    type: this.formData.type,
                    promAppro: this.formData.promAppro,
                    restricted: this.formData.restricted,
                    denomination: this.formData.denomination,
                    num: this.formData.num,
                    validatyBegin: this.formData.validatyBegin,
                    validatyEnd: this.formData.validatyEnd,
                    disableDate: this.formData.disableDate,
                    useTime: this.formData.useTime,
                    useRule:this.formData.useRule,
                    useNum: this.formData.useNum,
                    per: this.formData.per,
                    type2: this.formData.type2,
                    cash: this.formData.cash,
                    couponType: this.formData.couponType,
                    thirdDesc: this.formData.thirdDesc,
                    thirdType: this.formData.thirdType,
                  });
            } else {
                await edit({
                  id: this.id,
                  specName: this.formData.specName,
                  parentId: this.formData.parentId
                });
            }
            this.dialogFormVisible = false;
            this.$emit("close", true);
            this.$message({
              showClose: true,
              message: "提交成功",
              type: "success"
            });
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, "提示", {
                type: "error",
                confirmButtonText: "确定"
              });
            } else {
              throw e;
            }
          }
        } else {
          return;
        }
      });
    }
  },
  mounted() {
        
  }
};
</script>
<style>
.CdialogWrapper {
  width: 780px;
}
.el-select {
  width: 100%;
}
</style>
